<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
            <el-form-item label="开始时间" prop="starttime">
                <el-date-picker clearable size="small" style="width: 200px" v-model="queryParams.starttime" type="date" value-format="yyyy-MM-dd" placeholder="选择开始时间"> </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endtime">
                <el-date-picker clearable size="small" style="width: 200px" v-model="queryParams.endtime" type="date" value-format="yyyy-MM-dd" placeholder="选择结束时间"> </el-date-picker>
            </el-form-item>
            <el-form-item label="审核状态" prop="checkstatus">
                <el-select v-model="queryParams.checkstatus" placeholder="请选择审核状态" clearable size="small">
                    <el-option v-for="dict in checkstatusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
                    <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">


<!--            <el-col :span="1.5">-->
<!--                <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['biz:lock:edit']">审核</el-button>-->
<!--            </el-col>-->

<!--            <el-col :span="1.5">-->
<!--                <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['biz:lock:remove']">删除</el-button>-->
<!--            </el-col>-->

            <el-col :span="1.5">
                <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['biz:lock:export']">导出</el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="lockList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />

            <el-table-column label="编号" align="center" prop="id" />
            <el-table-column label="企业名称" align="center" prop="companyName" />

            <el-table-column label="商品SKU" align="center" prop="goodsSkuno" width="140" />

            <el-table-column label="申请锁库数量" align="center" prop="num" />



            <el-table-column label="结束时间" align="center" prop="endtime" width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.endtime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="审核状态" align="center" prop="checkstatus" :formatter="checkstatusFormat" />
            <el-table-column label="备注" align="center" prop="msg" />


            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['biz:lock:edit']">{{ scope.row.checkstatus != '0' ? '详情' : '审核' }}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改锁库申请对话框 -->

        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="企业名称" prop="companyName">
                    <el-input v-model="form.companyName" placeholder="请输入用户ID" :disabled="forbidden" />
                </el-form-item>
                <el-form-item label="商品SKU" prop="shopid">
                    <el-input v-model="form.goodsSkuno" placeholder="请输入商品SKU" :disabled="forbidden" />
                </el-form-item>
                <el-form-item label="申请锁库数量" prop="num" label-width="100px">
                    <el-input :disabled="forbidden" v-model="form.num" placeholder="请输入申请锁库数量" />
                </el-form-item>
                <el-form-item label="结束时间" prop="endtime">
                    <el-date-picker clearable size="small" style="width: 200px" v-model="form.endtime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间" :disabled="forbidden"> </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="checkstatusShow">
                <el-button type="primary" @click="submitForm(1)">审核通过</el-button>
                <el-button @click="submitForm(2)">审核不通过</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listLock, getLock, delLock, addLock, updateLock, exportLock } from '@/api/biz/lock';

export default {
    name: 'Lock',

    data() {
        return {
            checkstatusShow: true,
            forbidden: true,
            // 遮罩层

            loading: true,

            // 选中数组

            ids: [],

            // 非单个禁用

            single: true,

            // 非多个禁用

            multiple: true,

            // 总条数

            total: 0,

            // 锁库申请表格数据

            lockList: [],

            // 弹出层标题

            title: '',

            // 是否显示弹出层

            open: false,

            // 审核状态字典

            checkstatusOptions: [],

            // 状态字典

            statusOptions: [],

            // 查询参数

            queryParams: {
                pageNum: 1,

                pageSize: 10,

                starttime: undefined,

                endtime: undefined,

                checkstatus: undefined,

                status: undefined
            },

            // 表单参数

            form: {},

            // 表单校验

            rules: {
                uid: [
                    {
                        required: true,
                        message: '用户ID不能为空',
                        trigger: 'blur'
                    }
                ]
            }
        };
    },

    created() {
        this.getList();

        this.getDicts('lock_check_status').then(response => {
            this.checkstatusOptions = response.data;
        });

        this.getDicts('common_status').then(response => {
            this.statusOptions = response.data;
        });
    },

    methods: {
        /** 查询锁库申请列表 */

        getList() {
            this.loading = true;

            listLock(this.queryParams).then(response => {
                this.lockList = response.rows;

                this.total = response.total;

                this.loading = false;
            });
        },

        // 审核状态字典翻译

        checkstatusFormat(row, column) {
            return this.selectDictLabel(this.checkstatusOptions, row.checkstatus);
        },

        // 状态字典翻译

        statusFormat(row, column) {
            return this.selectDictLabel(this.statusOptions, row.status);
        },

        // 取消按钮

        cancel() {
            this.open = false;

            this.reset();
        },

        // 表单重置

        reset() {
            this.form = {
                id: undefined,

                uid: undefined,

                shopid: undefined,

                num: undefined,

                snum: undefined,

                starttime: undefined,

                endtime: undefined,

                checkstatus: '0',

                status: '0'
            };

            this.resetForm('form');
        },

        /** 搜索按钮操作 */

        handleQuery() {
            this.queryParams.pageNum = 1;

            this.getList();
        },

        /** 重置按钮操作 */

        resetQuery() {
            this.resetForm('queryForm');

            this.handleQuery();
        },

        // 多选框选中数据

        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id);

            this.single = selection.length != 1;

            this.multiple = !selection.length;
        },

        /** 新增按钮操作 */

        handleAdd() {
            this.reset();

            this.open = true;

            this.title = '添加锁库申请';
        },

        /** 修改按钮操作 */

        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids;
            getLock(id).then(response => {
                this.form = response.data;
                console.log(this.form.checkstatus)
                if (this.form.checkstatus != 0) {
                    this.checkstatusShow = false;
                } else {
                    this.checkstatusShow = true;
                }
                this.open = true;
                this.title = '审核锁库申请';
            });
        },

        /** 提交按钮 */

        submitForm: function(checkstatus) {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.id != undefined) {
                        this.form.checkstatus = checkstatus;
                        updateLock(this.form).then(response => {
                            if (response.code === 200) {

                                if(response.data.code == 500) {
                                    this.msgError(response.data.msg);
                                } else {
                                    this.msgSuccess('ok，操作成功');
                                }

                                this.open = false;

                                this.getList();
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    } else {
                        addLock(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess('新增成功');

                                this.open = false;

                                this.getList();
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                }
            });
        },

        /** 删除按钮操作 */

        handleDelete(row) {
            const ids = row.id || this.ids;

            this.$confirm('是否确认删除锁库申请编号为"' + ids + '"的数据项?', '警告', {
                confirmButtonText: '确定',

                cancelButtonText: '取消',

                type: 'warning'
            })
                .then(function() {
                    return delLock(ids);
                })
                .then(() => {
                    this.getList();

                    this.msgSuccess('删除成功');
                })
                .catch(function() {});
        },

        /** 导出按钮操作 */

        handleExport() {
            const queryParams = this.queryParams;

            this.$confirm('是否确认导出锁库申请数据项?', '警告', {
                confirmButtonText: '确定',

                cancelButtonText: '取消',

                type: 'warning'
            })
                .then(function() {
                    return exportLock(queryParams);
                })
                .then(response => {
                    // this.download(response.msg);
                    this.msgSuccess(response.msg);
                })
                .catch(function() {});
        }
    }
};
</script>
